<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css"/>
    <script src="/static/layui/layui.js"></script>
</head>
<body>

<form class="layui-form layui-form-pane"  method="post">
    <!-- layui-form-item 一个输入项-->
    <div class="layui-form-item">
        <label class="layui-form-label">username</label>
        <!-- layui-input-block 输入框会占满除文字外的整行 -->
        <div class="layui-input-block">
            <input id="birth" type="text" name="username" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
</form>
<script>
    //upload  文件上传的组件
    layui.use(['upload','layer'], function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/data.jsp' //上传接口
            ,accept:'file' // file代表所有文件，默认是images代表图片
            ,size:100 // 文件最大100kb
            ,done: function(res){
                //上传完毕回调
                layui.layer.msg("ok");
            }
            ,error: function(){
                //请求异常回调
                layui.layer.msg("error");
            }
        });
    });
</script>

<div class="layui-carousel" id="test2">
    <div carousel-item style="text-align: center;line-height: 280px">
        <div>
            <img src="images/005BxQqily1ftg6ai1f4rj317x17x1kx.jpg">
        </div>
        <div>
            <img src="images/005NPIKKly1fy38bbx87mj32863ca4qr.jpg">
        </div>
        <div>
            <img src="images/6dae77a3gy1ft4o56nysbj21ww2pfgti.jpg">
        </div>
        <div>
            <img src="images/006HfagUgy1fwotzpztioj30rs0rsjuk.jpg">
        </div>
        <div>
            <img src="images/ll.gif">
        </div>
    </div>
</div>
<script>
    layui.use(['carousel'], function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test2'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
        });
    });
</script>
</body>
</html>